<template>
  <div class="loanInfo">
    <van-nav-bar
        left-arrow
        @click-left="$router.replace('/hScmlvxSUkDQ/UjRzDSClllpS')"
        :title="$t('额度计算')"
    >
      <template #left>
        <van-icon name="arrow-left" class="nav_left_icon" size="18px"/>
      </template>
    </van-nav-bar>
    <div class="wrapper">
      <div class="limit_box" v-if="productList.length <= 0">
        <img class="limit_img" src="../../assets/my/limit_img.gif">
        <p>Disbursement in Progress</p>
        <p style="color: #15B3B2">{{$t('正在努力计算您的额度,请稍等')}}<span v-for="item in loadingPoint" :key="item">.</span></p>
      </div>
      <div class="product_content" v-else>
        <div class="product_tips_text">
          {{$t('您的额度已更新,快去点击下方按钮申请借款吧')}}
        </div>
        <div class="product_card" v-for="item in  productList" :key="item.productName"
        >
          <div class="product_header">
            <div>
              <img class="logo" :src="item.logoUrl"><span style="vertical-align: middle">{{ item.appName }}</span>
            </div>
            <van-button
                class="withdraw_btn"
                size="small"
                :disabled="item.state === 0 || item.state === 3"
                @click="applyEffectProduct(item)"
            >{{
                item.state === 0 ? $t('不可提现') : item.state === 3 ? $t('提现中') : $t('提现')
              }}
            </van-button>
          </div>

          <div class="product_body">
            <div class="product_info_item">
              <div class="body_title">Amount</div>
              <div style="color: #FAC816 ">₱{{ item.amount }}</div>
            </div>
            <div class="product_info_item">
              <div class="body_title">Interest</div>
              <div>{{ parseFloat((parseFloat(item.interestRate) * 100).toFixed(1))}}%</div>
            </div>

          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import {
  getHomepageLimit, getHomePageProduct
} from '@/api/home'
import {onMounted, ref, onBeforeUnmount} from "vue";
import router from "@/router";
import {Toast} from 'vant'
import {useI18n} from 'vue-i18n'
import {deepClone, formatMoney, getAndroidUploadResult} from '@/utils/tool'
import {useStore} from "vuex";
import {useRoute} from 'vue-router'
export default {
  setup() {
    const store = useStore()
    const {t} = useI18n()
    const productNameMain = localStorage.getItem('productName')
    const textCopywriting = ref('Calculating the loan amount...')
    const progressValue = ref(10)
    const progressTimer = ref(null)
    const {productName} = useRoute().query
    const productList = ref([])
    const loadingPoint = ref(5)
    // 格式化金额
    const formatterMoney = (value) => {
      if (value) {
        return formatMoney(value)
      } else {
        return value
      }
    }

    async function getLimit() {
      const res = await getHomepageLimit({productName})
      if (res.code === 1) {
        clearInterval(progressTimer.value)
        setTimeout(() => {
          getCardList()
        }, 1000)
      } else if (res.code === 6020) {
        const isResult = await getAndroidUploadResult()
        if (isResult) {
          const res = await getHomepageLimit({productName})
          if (res.code === 1) {
            progressValue.value = 100
            textCopywriting.value = t('信用计算很快就会完成,如果你不想留在这个页面上,你可以返回主页')
            setTimeout(() => {
              getCardList()
            }, 1000)
          }
        }
      }
    }

    // 状态-2获取中-1重新获取0不可借1还款期2可提现3体现中4拒绝5逾期
    const getCardList = async () => {
      const res = await getHomePageProduct({productName: productNameMain})
      if (res.code === 1) {
        productList.value = deepClone(res.data.canBorroweProducts)
      }
    }

    // 申请多产品
    async function applyEffectProduct(product) {
      if (product.state !== 2) return Toast(t('当前产品不可借'))
      router.push({
        path: '/qdFaOEpQOpE',
        query: {
          productName: product.productName
        }
      })
    }

    function initLimit() {
      progressTimer.value = setInterval(() => {
        loadingPoint.value++
        if (loadingPoint.value >= 5) {
          loadingPoint.value = 1
        }
      }, 500)
      getLimit()
    }

    onMounted(() => {
      //  获取安卓上传结果
      getAndroidUploadResult().then(res=>{
        if (res) {
          initLimit()
        }
      })
      // 清除loading
      store.dispatch('changeLoading', false)
    })
    onBeforeUnmount(() => {
      clearInterval(progressTimer.value)
    })
    return {
      loadingPoint,
      applyEffectProduct,
      progressValue,
      confirm,
      formatterMoney,
      textCopywriting,
      productList
    }
  }
}
</script>

<style lang="less" scoped>

.loanInfo {
  overflow: auto;

  .wrapper {
    padding: 15px;
    .product_card {
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
      border-radius: 12px;
      background-color: #fff;
      box-sizing: border-box;
      margin-bottom: 20px;
      font-size: 18px;
      position: relative;

      .product_header {
        display: flex;
        align-items: center;
        padding: 10px;
        border-radius: 8px 8px 0 0px;
        background-color: #BBF0F0;
        justify-content: space-between;
        .withdraw_btn {
          border-radius: 10px;
          background-color: #15B3B2;
          font-size: 16px;
          color: #FFFFFF;
          padding: 5px 10px;
        }s
        .is_disabled {
          opacity: 0.5;
        }
      }

      .logo {
        height: 36px;
        width: 36px;
        vertical-align: middle;
        margin-right: 10px;
        border-radius: 50%;
      }

      .product_body {
        padding: 15px;
        font-size: 16px;
        display: flex;
        justify-content: space-between;
        z-index: 10;
        position: relative;
        .product_info_item {
          padding: 5px 0;
        }

        .body_title {
          color: #333333;
          margin-bottom: 10px;
        }
      }

      .product_apply {
        width: 120px;
      }

    }

    .product_tips_text {
      font-size: 14px;
      padding: 0 15px;
      margin-bottom: 20px;
      color: #15B3B2;
    }


    .limit_box {
      border-radius: 10px;
      box-sizing: border-box;
      background-color: #FFFFFF;
      padding: 10px;
      width: 100%;
      margin-top: 30px;
      font-size: 15px;
      text-align: center;
      line-height: 22px;
      .limit_img {
        height: 150px;
        width: 150px;
      }
    }
  }
}
</style>
